<template>
  <main>
    <div class="complaint-management">
      <!-- 筛选按钮 -->
      <el-row class="filter-row">
        <el-col :span="4">
          <el-select v-model="filter.status" placeholder="选择状态" @change="handleFilterChange">
            <el-option label="待处理" value="pending"></el-option>
            <el-option label="已处理" value="resolved"></el-option>
            <el-option label="上报" value="reported"></el-option>
            <el-option label="历史投诉" value="history"></el-option>
          </el-select>
        </el-col>
      </el-row>

      <!-- 投诉数据展示表格 -->
      <el-table :data="paginatedComplaints" style="width: 100%" stripe>
        <el-table-column prop="time" label="接到投诉时间" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="120"></el-table-column>
        <el-table-column prop="complainant" label="投诉人" width="180"></el-table-column>
        <el-table-column prop="content" label="投诉内容"></el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button v-if="row.status === 'pending'" @click="handleProcess(row)" type="primary">处理</el-button>
            <el-button v-if="row.status === 'resolved' || row.status === 'reported'" @click="handleView(row)">查看</el-button>
            <el-button v-if="row.status === 'pending'" @click="handleReport(row)" type="warning">上报</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能 -->
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="totalComplaints"
          @current-change="handlePageChange"
          layout="prev, pager, next, jumper, ->, total"
      ></el-pagination>

      <!-- 处理投诉弹窗 -->
      <el-dialog :visible.sync="dialogVisible" title="处理投诉">
        <el-form :model="selectedComplaint" label-width="120px">
          <el-form-item label="投诉人">
            <el-input v-model="selectedComplaint.complainant" disabled></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="selectedComplaint.phone" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="selectedComplaint.email" disabled></el-input>
          </el-form-item>
          <el-form-item label="投诉内容">
            <el-input type="textarea" v-model="selectedComplaint.content" disabled></el-input>
          </el-form-item>
          <el-form-item label="平台解决方案">
            <el-input type="textarea" v-model="selectedComplaint.solution"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="markAsResolved">已解决</el-button>
      </span>
      </el-dialog>
    </div>
  </main>

</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { ElTable, ElTableColumn, ElButton, ElSelect, ElOption, ElPagination, ElDialog, ElForm, ElFormItem, ElInput, ElRow, ElCol } from 'element-plus';
const filter = ref({ status: 'pending' });
const complaints = ref([
  // 示例数据，实际使用中可以替换成 API 调用获取的数据
  { time: '2025-05-01', status: 'pending', complainant: '张三', content: '商品破损', phone: '123456789', email: 'zhangsan@example.com', solution: '' },
  { time: '2025-05-01', status: 'pending', complainant: '张三', content: '商品破损', phone: '123456789', email: 'zhangsan@example.com', solution: '' },
  { time: '2025-05-01', status: 'pending', complainant: '张三', content: '商品破损', phone: '123456789', email: 'zhangsan@example.com', solution: '' },
  { time: '2025-05-02', status: 'resolved', complainant: '李四', content: '物流延迟', phone: '987654321', email: 'lisi@example.com', solution: '已退款' },
  { time: '2025-05-01', status: 'pending', complainant: '张三', content: '商品破损', phone: '123456789', email: 'zhangsan@example.com', solution: '' },
  { time: '2025-05-01', status: 'pending', complainant: '张三', content: '商品破损', phone: '123456789', email: 'zhangsan@example.com', solution: '' },
  { time: '2025-05-01', status: 'pending', complainant: '张三', content: '商品破损', phone: '123456789', email: 'zhangsan@example.com', solution: '' },
  { time: '2025-05-01', status: 'pending', complainant: '张三', content: '商品破损', phone: '123456789', email: 'zhangsan@example.com', solution: '' },
  { time: '2025-05-02', status: 'resolved', complainant: '李四', content: '物流延迟', phone: '987654321', email: 'lisi@example.com', solution: '已退款' },
  { time: '2025-05-01', status: 'pending', complainant: '张三', content: '商品破损', phone: '123456789', email: 'zhangsan@example.com', solution: '' },
  { time: '2025-05-01', status: 'pending', complainant: '张三', content: '商品破损', phone: '123456789', email: 'zhangsan@example.com', solution: '' },
  { time: '2025-05-01', status: 'pending', complainant: '张三', content: '商品破损', phone: '123456789', email: 'zhangsan@example.com', solution: '' },
  { time: '2025-05-01', status: 'pending', complainant: '张三', content: '商品破损', phone: '123456789', email: 'zhangsan@example.com', solution: '' },
  { time: '2025-05-01', status: 'pending', complainant: '张三', content: '商品破损', phone: '123456789', email: 'zhangsan@example.com', solution: '' },
  { time: '2025-05-01', status: 'pending', complainant: '张三', content: '商品破损', phone: '123456789', email: 'zhangsan@example.com', solution: '' },
  { time: '2025-05-01', status: 'pending', complainant: '张三', content: '商品破损', phone: '123456789', email: 'zhangsan@example.com', solution: '' },
  { time: '2025-05-02', status: 'resolved', complainant: '李四', content: '物流延迟', phone: '987654321', email: 'lisi@example.com', solution: '已退款' },
  // 添加更多投诉数据...
]);
const totalComplaints = ref(0);
const currentPage = ref(1);
const pageSize = ref(10); // 每页显示的条数
const dialogVisible = ref(false);
const selectedComplaint = ref({});

const paginatedComplaints = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return complaints.value.slice(start, start + pageSize.value);
});

const getComplaints = () => {
  // 实际应用中可以添加 API 请求来获取数据
  totalComplaints.value = complaints.value.length; // 更新总投诉数
};

const handlePageChange = (page) => {
  currentPage.value = page; // 更新当前页
  // 根据页码重新获取数据（如果有需要）
};

const handleFilterChange = () => {
  getComplaints(); // 筛选条件变化时获取数据
};

const handleProcess = (complaint) => {
  selectedComplaint.value = { ...complaint }; // 选中投诉的详细信息
  dialogVisible.value = true; // 显示弹窗
};

const handleView = (complaint) => {
  selectedComplaint.value = { ...complaint }; // 选中投诉的详细信息
  dialogVisible.value = true; // 显示弹窗
};

const handleReport = (complaint) => {
  alert(`投诉 ${complaint.complainant} 已上报`);
  // 实际上报逻辑
};

const markAsResolved = () => {
  selectedComplaint.value.status = 'resolved'; // 更新投诉状态为已解决
  dialogVisible.value = false; // 隐藏对话框
  getComplaints(); // 更新数据
};

onMounted(() => {
  getComplaints(); // 页面加载时获取投诉数据
});

</script>

<style scoped>
main {
  width: 100%;
  height: 100%;
  position: relative;

  .complaint-management {
    width: 100%;
    height: 100%;
    float: left;
    padding: 20px;

    .filter-row {
      margin-bottom: 20px;
    }
  }
  .tip {
    position: absolute;
    background-color: pink;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    .write {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: auto;
      height: auto;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .announcement-form {
      width: 800px;
      height: auto;
      padding: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;

      h2 {
        font-size: 30px;
        margin-bottom: 20px;
      }

      .el-form-item {
        width: 100%;
      }
    }
  }
}
</style>
